<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
            name="viewport"
    />
    <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
    <title>Document</title>
    <style>
        .section {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          margin-bottom: 16px;
        }

        .section > button {
          width: 40%;
          height: 32px;
          margin: 5%;
        }
    </style>
</head>
<body>
<div class="section">
    <button type="button" id="J_API1">h5从原生获取数据</button>
</div>

<p id="demo"></p>
<p id="demo2"></p>
<script>
    function ready(callback) {
       // 如果 jsbridge 已经注入则直接调用
       if (window.AlipayJSBridge) {
          callback && callback();
       } else {
          // 如果没有注入则监听注入的事件
          document.addEventListener('AlipayJSBridgeReady', callback, false);
       }
    }

    ready(function () {
       //注册监听
       document.addEventListener('testAction',
          function (e) {
             alert(JSON.stringify(e));
          }, false
       );

       AlipayJSBridge.call('H5_to_Native', {
          param1: '我是H5主动送来的数据'
        }, function(e) {
          if (e.error === 1) {
            alert('请前往自定义设置注册JSAPI');
          }
        });

      var api1Node = document.getElementById('J_API1');
      api1Node.addEventListener('click', function () {
        AlipayJSBridge.call('myapi1',function(e) {
          if (e.error === 1) {
            alert('请前往自定义设置注册JSAPI');
          } else {
            document.getElementById("demo").innerHTML = JSON.stringify(e);
          }
        });
      });
    });
</script>
</body>
</html>